/**
 * Created by imac13 on 19/1/3.
 */
import React, { Component } from 'react';
import { Menu } from 'antd';
import {NavLink} from 'react-router-dom';
import './index.less'
import menuList from './../../static/menuConfig'

const SubMenu = Menu.SubMenu;
class NavLeft extends Component {
    componentWillMount () {
        const menuTreeNode = this.menuTree(menuList);
        this.setState({
            menuTreeNode
        })
    }
    menuTree = (data)=> {
        return data.map((item)=>{
            if (item.children) {
                return (
                    <SubMenu key={item.key} title={item.title}>
                        {this.menuTree(item.children)}
                    </SubMenu>
                )
            }
           return <Menu.Item key={item.key} title={item.title}>
                    <NavLink to={item.key}>{item.title}</NavLink>
                  </Menu.Item>
        })
    };
    render() {
        return (
            <div>
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt=""/>
                    <h1>Imooc MS</h1>
                </div>
                <Menu theme="dark">
                        { this.state.menuTreeNode }
                </Menu>
            </div>
        );
    }
}

export default NavLeft;